<template>
	<view class="container">
		<!-- 状态 -->
		<view class="nav">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="navtitle">
				社区任务
				<view class="add" @click="goaddtask" v-if="type==1">发布任务</view>
			</view>
		</view>
		<view class="status">
			<view class="status-title" :class="{'status-title-after':tasktype==0}" @click="checkIndex(0)">
				{{type==0?"待接受":"待审核"}}
			</view>
			<view class="status-title" :class="{'status-title-after':tasktype==1}" @click="checkIndex(1)">
				{{type==0?"进行中":"审核完成"}}
			</view>
			<view class="status-title" :class="{'status-title-after':tasktype==2}" @click="checkIndex(2)">
				{{type==0?"已完成":"已接受"}}
			</view>
			<view class="status-title" :class="{'status-title-after':tasktype==3}" @click="checkIndex(3)"
				v-if="type==1">已完成</view>
		</view>
		<swiper class="swiper" :current="tasktype" @change='changeIndex' v-if="type==0">
			<!-- 待接受 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="gettasklist" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list0" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>{{item.taskName}}</view>
							<view>{{item.taskMoney}}积分</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								<!-- {{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.streetName}}{{item.taskAddress}} -->
								{{item.communityName}}{{item.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系方式：</view>
							<view>{{item.taskPhone | setphone}}</view>
						</view>
						<view class="item-li">
							<view>需求人数：</view>
							<view>{{item.taskAlreadyNumber}}/{{item.taskUserNumber}}</view>
						</view>
						<view class="item-li">
							<view>距离：</view>
							<view>{{item.distance}}Km</view>
						</view>
						<!-- <view class="item-li textcolor">
							<view>(备注：此任务需要工作时间做满才能获得所以积分)</view>
						</view> -->
						<view class="grabbing-order" @click="gettask(item.taskId)">领取任务</view>
					</view>
					<view class="bg" v-if="list0.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 进行中 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="gettasklist" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list1" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>{{item.task.taskName}}</view>
							<view>{{item.task.taskMoney}}积分</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.task.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.task.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.task.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								<!-- {{item.task.provinceName}}{{item.task.cityName}}{{item.task.areaName}}{{item.task.streetName}}{{item.task.taskAddress}} -->
								{{item.task.communityName}}{{item.task.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系方式：</view>
							<view>{{item.task.taskPhone}}</view>
						</view>
						<!-- <view class="item-li ex">
							<view>发布方：</view>
							<view class="ex">方兴社区</view>
						</view> -->
						<view class="grabbing-order" @click="submit(item)">提交完成</view>
					</view>
					<view class="bg" v-if="list1.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 已完成 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="gettasklist" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list2" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>{{item.task.taskName}}</view>
							<view>{{item.task.taskMoney}}积分</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.task.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.task.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.task.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								<!-- {{item.task.provinceName}}{{item.task.cityName}}{{item.task.areaName}}{{item.task.streetName}}{{item.task.taskAddress}} -->
								{{item.task.communityName}}{{item.task.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系方式：</view>
							<view>{{item.task.taskPhone}}</view>
						</view>
						<!-- <view class="item-li">
							<view>开始签到时间：</view>
							<view>2021-03-24 08:20</view>
						</view>
						<view class="item-li">
							<view>结束签到时间：</view>
							<view>2021-03-24 08:20</view>
						</view> -->
						<!-- <view class="item-li">
							<view class="getpoint">获得积分：100积分已入账</view>
						</view> -->
					</view>
					<view class="bg" v-if="list2.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<swiper class="swiper" :current="tasktype" @change='changeIndex' v-if="type==1">
			<!-- 待审核 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="getMytask" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list0" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>等待后台审核</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.streetName}}{{item.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系电话：</view>
							<view>{{item.taskPhone}}</view>
						</view>
						<view class="btn_box">
							<view class="btn" @click="set(item)">修改任务</view>
							<view class="btn" @click="deltask(item.taskId)">取消任务</view>
						</view>
					</view>
					<view class="bg" v-if="list0.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 审核完成 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="getMytask" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list1" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>{{item.taskName}}</view>
							<view>{{item.taskMoney}}积分</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.streetName}}{{item.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系方式：</view>
							<view>{{item.taskPhone}}</view>
						</view>
						<!-- <view class="item-li ex">
							<view>发布方：</view>
							<view class="ex">方兴社区</view>
						</view> -->
						<view class="item-li ex">
							<view>任务码：</view>
							<view class="ex">{{item.taskCode}}</view>
						</view>
						<!-- <view class="tishi">待义工上门服务后将任务码告知义工</view> -->
					</view>
					<view class="bg" v-if="list1.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 进行中 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="getMytask" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list2" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>{{item.taskName}}</view>
							<view>{{item.taskMoney}}积分</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.streetName}}{{item.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系方式：</view>
							<view>{{item.taskPhone}}</view>
						</view>
						<!-- <view class="item-li ex">
							<view>发布方：</view>
							<view class="ex">方兴社区</view>
						</view> -->
						<view class="item-li ex">
							<view>接受人任务人：</view>
							<view class="ex">{{item.userTask[0].volunteersName}}</view>
						</view>
						<view class="item-li ex">
							<view>任务人联系方式：</view>
							<view class="ex">{{item.userTask[0].volunteersPhone}}</view>
						</view>
						<view class="item-li ex">
							<view>任务码：</view>
							<view class="ex">{{item.taskCode}}</view>
						</view>
						<view class="tishi">待义工上门服务后将任务码告知义工</view>
					</view>
					<view class="bg" v-if="list2.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 已完成 -->
			<swiper-item class="item">
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="getMytask" :refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
					<view class="swiper-item-list" v-for="(item,index) in list3" :key="index">
						<!-- 任务名 -->
						<view class="item-title">
							<view>{{item.taskName}}</view>
							<view>{{item.taskMoney}}积分</view>
						</view>
						<view class="item-li">
							<view>任务内容：</view>
							<view>{{item.taskContent}}</view>
						</view>
						<view class="item-li">
							<view>开始时间：</view>
							<view>{{item.startTime}}</view>
						</view>
						<view class="item-li">
							<view>结束时间：</view>
							<view>{{item.endTime}}</view>
						</view>
						<view class="item-li">
							<view>联系地址：</view>
							<view>
								{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.streetName}}{{item.taskAddress}}
							</view>
						</view>
						<view class="item-li">
							<view>联系方式：</view>
							<view>{{item.taskPhone}}</view>
						</view>
						<!-- <view class="item-li ex">
							<view>发布方：</view>
							<view class="ex">方兴社区</view>
						</view> -->
						<view class="item-li ex">
							<view>接受人任务人：</view>
							<view class="ex">{{item.userTask[0].volunteersName}}</view>
						</view>
						<view class="item-li ex">
							<view>任务人联系方式：</view>
							<view class="ex">{{item.userTask[0].volunteersPhone}}</view>
						</view>
						<!-- <view class="item-li ex">
							<view>任务码：</view>
							<view class="ex">{{item.taskCode}}</view>
						</view> -->
						<!-- <view class="tishi">待义工上门服务后将任务码告知义工</view> -->
					</view>
					<view class="bg" v-if="list3.length==0">
						<image src="../../static/bg/task.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="bg" v-if="type==2">
			<image src="../../static/bg/task.png"></image>
			<view>
				认证后才可查看任务
			</view>
		</view>
		<u-mask :show="show" @click="show = false" v-if="show">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="showbox">
						<view class="codebox">输入任务码</view>
						<u-message-input mode="box" :maxlength="4" :dot-fill="true" @finish="finish" :focus="true"></u-message-input>
					</view>
				</view>
			</view>
		</u-mask>
		<u-modal v-model="mdshow" :content="content"></u-modal>   
	</view>
</template>

<script>
	import {
		mytasklist,
		deltask,
		gettasklist,
		gettask,
		setcode
	} from "../../api/user.js"
	export default {
		data() {
			return {
				current: 0,
				type: null, //0义工 1老人
				tasktype: 0,
				num0: 1,
				num1: 1,
				num2: 1,
				num3: 1,
				list0: [],
				list1: [],
				list2: [],
				list3: [],
				flag: true,
				longitude:"117.291132",
				latitude:"31.721205",
				show:false,
				taskid: null,
				code: "",
				content: "任务领取成功，请在任务开始时间前赶往任务地点，任务不可取消",
				mdshow: false,
				triggered:false
			}
		},
		filters: {
			setphone(val) {
				let str = val;
				let pre = str.substr(0, 3);
				let next = str.substr(7, 4);
				let result = pre + '****' + next;
				return result
			},
		},
		onShow() {
			this.refresh()
		},
		watch: {
			tasktype: {
				handler(n, o) {
					if (n != o) {
						if (this["list" + n].length == 0) {
							if (this.type == 1) {
								this.getMytask()
							} else {
								this.gettasklist()
							}
						}
					}
				},
				deep: true
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.refresh()
		},
		methods: {
			finish(e){
				console.log('输入结束，当前值为：' + e);
				this.code=e
				this.show=false
				this.ok()
			},
			refresherrefresh(){
				if (this.triggered) return;
				this.triggered = true;
				this.refresh()
				setTimeout(() => {
				        this.triggered = false;
				}, 500)
			},
			refresh(){
				if (uni.getStorageSync('user')) {
					this.type = uni.getStorageSync('user').userType
					this.num0 = 1
					this.num1 = 1
					this.num2 = 1
					this.num3 = 1
					this.list0 = []
					this.list1 = []
					this.list2 = []
					this.list3 = []
					if (this.type == 1) {
						this.getMytask()
					} else {
						if(this.latitude==''){
							uni.getLocation({
							    type: 'gcj02',
							    success:(res)=> {
									console.log(res)
							        console.log('当前位置的经度：' + res.longitude);
							        console.log('当前位置的纬度：' + res.latitude);
									this.latitude=res.latitude
									this.longitude=res.longitude
									this.gettasklist()
							    },
								fail:()=>{
									this.msg("获取位置失败，无法查看任务","none")
								}
							});
						}else{
							this.gettasklist()
						}
						// #ifdef H5
						this.gettasklist()
						// #endif
					}
				}
			},
			async ok() {
				let res = await this.get(setcode, {
					userTaskId: this.taskid,
					taskCode: this.code
				})
				this.msg("提交成功")
				this.list1 = []
				this.num1 = 1
				this.show = false
				this.gettasklist()
			},

			// 完成任务
			submit(item) {
				this.taskid = item.userTaskId
				this.show = true
			},
			// 我的发布
			async getMytask() {
				if (this.flag) {
					this.flag = false
					let num = this["num" + this.tasktype]
					let res = await this.get(mytasklist, {
						type: this.tasktype,
						pageSize: 10,
						pageNum: num
					})
					if (res.data.length > 0) {
						this["num" + this.tasktype]++
						this["list" + this.tasktype] = [...this["list" + this.tasktype], ...res.data]
					}
					this.flag = true
				}

			},
			// 义工获取列表
			async gettasklist() {
				if (this.flag) {
					this.flag = false
					let num = this["num" + this.tasktype]
					let res = await this.get(gettasklist, {
						type: this.tasktype,
						pageSize: 10,
						pageNum: num,
						latitude: this.latitude,
						longitude: this.longitude
					})
					console.log(res)
					if (res.data.taskList.length > 0) {
						this["num" + this.tasktype]++
						this["list" + this.tasktype] = [...this["list" + this.tasktype], ...res.data.taskList]
					}
					this.flag = true
				}
			},
			// 领取任务
			async gettask(id) {
				console.log(id)
				this.showMd("领取任务后不可取消", () => {
					this.get(gettask, {
						taskId: id
					}).then(() => {
						this.list0 = []
						this.num0 = 1
						this.mdshow = true
						this.gettasklist()
					})
				})
			},
			// 修改任务
			set(item) {
				uni.navigateTo({
					url: "./addtask?data=" + JSON.stringify(item)
				})
			},
			// 删除任务
			async deltask(id) {
				console.log(id)
				this.showMd("是否取消任务", () => {
					this.get(deltask, {
						taskId: id
					}).then(() => {
						this.msg("取消成功")
						this.num0 = 1
						this.list0 = []
						this.getMytask()
					})
				})
			},
			changeIndex(e) {
				this.tasktype = e.detail.current
			},
			checkIndex(index) {
				this.tasktype = index
			},
			goaddtask() {
				uni.navigateTo({
					url: "./addtask"
				})
			}
		}
	}
</script>

<style lang="less">
	.warp {
		display: flex;
		justify-content: center;
		padding-top: 400rpx;
	}

	.submit {
		width: 304rpx;
		height: 66rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 44rpx;
		text-align: center;
		line-height: 66rpx;
		color: #FFFFFF;
		margin-top: 40rpx;
	}

	.showbox {
		border-radius: 20rpx !important;
		padding: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
	}

	.codebox {
		display: flex;
		align-items: center;
		font-size: 34rpx;

		text {
			font-size: 30rpx;
			color: #666666;
			margin-right: 30rpx;
		}

		input {
			font-size: 30rpx;
		}
	}

	.tishi {
		font-size: 30rpx;
		color: #F0812D;
	}

	.bg {
		display: flex;
		justify-content: center;
		padding-top: 300rpx;
		flex-direction: column;
		align-items: center;

		image {
			width: 500rpx;
			height: 300rpx;
		}
	}

	.btn_box {
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.btn {
		width: 304rpx;
		height: 66rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 44rpx;
		margin: 0 10rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 66rpx;
		font-size: 26rpx;
	}

	.add {
		position: absolute;
		right: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}

	.navtitle {
		position: relative;
		align-items: center;
		justify-content: center;
		display: flex;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 88rpx;
		color: #333333;
		opacity: 1;
	}

	.nav {
		height: calc(88rpx + var(--status-bar-height));
		background-color: #FFFFFF;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.container {
		background: #F3F3F3;
		height: 100vh;
	}

	.status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		background: #FFFFFF;
		padding-bottom: 20rpx;
		height: 100rpx;
		box-sizing: border-box;
	}

	.status-title {
		color: #999999;
		font-size: 28rpx;
	}

	.status-title-after {
		color: #333333;
		line-height: 50rpx;
		border-bottom: 1px solid #333333;
	}

	.swiper {
		height: calc(100vh - 180rpx - var(--status-bar-height));
	}

	.item {
		height: 100%;
	}

	.swiper-item {
		height: 100%;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.swiper-item-list {
		width: 690rpx;
		// height: 600rpx;
		margin-left: 30rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		// margin-top: 30rpx;
		margin-bottom: 30rpx;
		padding: 20rpx;
		font-size: 27rpx;
	}

	.item-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #F09238;
	}

	.item-title :nth-child(1) {
		font-size: 32rpx;
		font-weight: bold;
		color: #F09238;
	}

	.item-li {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		font-size: 28rpx;
		color: #333333;
	}

	.ex {
		font-size: 32rpx;
		font-weight: bold !important;
		color: #333333;
	}

	.item-li :nth-child(2) {
		font-weight: 300;
	}

	.textcolor {
		color: #F09238;
		font-size: 22rpx;
	}

	.grabbing-order {
		width: 650rpx;
		height: 66rpx;
		background: #F09238;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 66rpx;
	}

	.begin {
		font-weight: bold !important;
	}

	.getpoint {
		font-size: 26rpx;
		font-weight: bold;
		color: #F09238;
	}
</style>
